<template>
<div id="home">
  <!-- 导航栏 -->
<nav-bar class="home-nav">
<div slot="center">
  购物街
</div>
</nav-bar>


<!--轮播图 -->
<!-- 通过属性绑定，将创建实例的时候从后端请求道的数据绑定到子组件的属性prop中，用于轮播图的展示 -->
  <home-swip :list_image_url="list_image_url"></home-swip>
 

 <!-- 推荐信息的展示 -->
  <recommend-view :recommends="recommends"></recommend-view>


<!-- 本周流行 -->
<feature-view></feature-view>

<!-- TabControl -->
<tab-control class="tab-control" :titles="['流行','新款','精选']"></tab-control>

<ul>
  <li>列表</li>
    <li>列表</li>

  <li>列表</li>

  <li>列表</li>

  <li>列表</li>
  <li>列表</li>
    <li>列表</li>

  <li>列表</li>

  <li>列表</li>

  <li>列表</li>
  <li>列表</li>
    <li>列表</li>

  <li>列表</li>

  <li>列表</li>

  <li>列表</li>
  <li>列表</li>
    <li>列表</li>

  <li>列表</li>

  <li>列表</li>

  <li>列表</li>
  <li>列表</li>
    <li>列表</li>

  <li>列表</li>

  <li>列表</li>

  <li>列表</li>
  <li>列表</li>
    <li>列表</li>

  <li>列表</li>

  <li>列表</li>

  <li>列表</li>
  <li>列表</li>
    <li>列表</li>

  <li>列表</li>

  <li>列表</li>

  <li>列表</li>
  <li>列表</li>
    <li>列表</li>

  <li>列表</li>

  <li>列表</li>

  <li>列表</li>
  <li>列表</li>
    <li>列表</li>

  <li>列表</li>

  <li>列表</li>

  <li>列表</li>

</ul>

</div>
</template>

<script>
import HomeSwip from './childComps/HomeSwip'
import RecommendView from './childComps/RecommendView'
import FeatureView from './childComps/FeatureView'

// 定义了src路径为@，在自己定义的vue.conf.js中
import NavBar from '@/components/common/navbar/NavBar'
import TabControl from '@/components/content/tabControl/TabControl'

import {getHomeMultidata} from 'network/home'


export default {
  components:{
    //注册组件ES6语法
    HomeSwip,
    RecommendView,
    FeatureView,
    NavBar,
    TabControl
  },
  data () {
    return {
      list_image_url:[],
      recommends:[]
    }
  },
  //实现一个生命周期函数，当一创建完这个组件就发送网络请求
  created () {
    //1.请求多个数据  通过调用axios封装的网络模块
    getHomeMultidata().then(res=>{
     // console.log(res);
      //console.log(res.data.banner)
    //  console.log(res.data.recommend)
      //箭头函数中的this，向外层作用域中，一层层查找this，直到有this的定义
     //将拿到的数据赋值给当前组件中的数据函数，对数据进行保存
    this.list_image_url = res.data.banner.list;
    this.recommends = res.data.recommend.list;
    })
  }

}
</script>

<style>
#home{
  padding-top:44px;

}


.home-nav{
  /* 因为在:root定义了，所以全局可以使用里面的变量 */
  background-color: var(--color-tint);
  color:seashell;

/* 给顶部导航栏一个定位，让其不随着下拉或者上拉滚动 */
  position: fixed;
  left: 0;
  right: 0;
  top:0;
  z-index: 9;
}

.tab-control{
  position: sticky;
  top: 44px;
}

</style>